<template>
  <div>
    <van-cell value="内容" icon="location-o" class="van-cells">
      <template #icon>
        <van-icon name="arrow-left" color="#FFFFFF" size="22" />
      </template>
      <template #right-icon>
        <van-icon
          name="location-o"
          color="#FFFFFF"
          size="22"
          @click="$router.push('/map')"
        />
      </template>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #default>
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          left-icon="search"
        >
          <template #left>
            <div class="location">
              <span @click="goCityList()">{{ cityName }}</span>
              <van-icon name="arrow-down" />
            </div>
          </template>
        </van-search>
      </template>
    </van-cell>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>
    <van-grid clickable>
      <van-grid-item icon="wap-home-o" text="整租" />
      <van-grid-item icon="friends-o" text="合租" />
      <van-grid-item
        icon="location-o"
        text="地图找房"
        @click="$router.push('/map')"
      />
      <van-grid-item icon="phone-circle-o" text="去出租" @click="goRent" />
    </van-grid>
    <div class="group">
      <span>租房小组</span>
      <div>更多</div>
    </div>
    <van-grid :column-num="2" :gutter="10" icon-size="13px" clickable>
      <van-grid-item v-for="item in groups" :key="item.id">
        <template #icon>
          <img :src="item.imgSrc" alt="" class="van_grid_img" />
        </template>
        <template #text>
          <div class="van_grid_text">
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
          </div>
        </template>
      </van-grid-item>
    </van-grid>
    <br />
    <br />
    <br />
  </div>
</template>

<script>
import { getIndexSwiper, getIndexGroups } from '@/api/index'
export default {
  name: 'layout_index',
  async created () {
    await getIndexSwiper()
    const { body } = await getIndexGroups()
    this.groups = [...body]
    this.groups = this.groups.map(item => {
      return {
        desc: item.desc,
        id: item.id,
        title: item.title,
        imgSrc: 'http://liufusong.top:8080' + item.imgSrc
      }
    })
  },
  data () {
    return {
      value: '',
      cityName: this.$route.query.city || '北京',
      cityId: this.$route.query.cityId || 'AREA|88cff55c-aaa4-e2e0',
      images: [
        'http://liufusong.top:8080/img/swiper/1.png',
        'http://liufusong.top:8080/img/swiper/2.png',
        'http://liufusong.top:8080/img/swiper/3.png'
      ],
      groups: []
    }
  },
  methods: {
    goCityList () {
      this.$router.push({
        path: '/city',
        query: {
          cityName: this.cityName
        }
      })
    },
    goRent () {
      this.$router.push({
        path: '/releaseHouse',
        query: {
          cityId: this.cityId
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.van-cells {
  background-color: #21b97a;
  .van-search {
    padding: 0;
  }
  .van-icon-arrow-left {
    padding: 5px 10px 5px 0px;
  }
  .van-icon-location-o {
    padding: 5px 0px 5px 10px;
  }
  .location {
    padding-left: 5px;
    border-right: 1px solid #e5e5e5;
    span {
      padding-left: 5px;
    }
    .van-icon-arrow-down {
      padding-left: 5px;
      padding-right: 6px;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.wrapper {
  background-color: #f6f5f6;
}
img {
  width: 100%;
  height: 180px;
}

.van_grid_img {
  height: 60px;
}
.group {
  margin: 20px 20px;
  display: flex;
  justify-content: space-between;
  span {
    font-weight: 700;
    font-size: 15px;
  }
  div {
    font-size: 14px;
    color: darkgray;
  }
}
</style>
